<template>
    <div>
        <div>
            <div class="divstyle">
                <span style="font-size: 30px;color: #0040a1;font-weight:bold">管理员管理</span>
            </div>
            <div style="padding-left: 85%">
                <el-button @click="showAddManagerDialog" style="color: #0103af;font-weight:bold ">添加管理员<i
                        class="el-icon-plus"></i></el-button>
            </div>
            <el-divider></el-divider>
            <div class="divstyle">
                <el-card class="box-card">
                    <el-table stripe border :data="AllManager.slice((currentPage-1)*pageSize,currentPage*pageSize)">
                        <el-table-column label="managerID" prop="managerID" align="center"></el-table-column>
                        <el-table-column label="ID" prop="mid" width="60" align="center"
                                         v-if="showClose"></el-table-column>
                        <el-table-column label="管理员名称" prop="mname" align="center"></el-table-column>
                        <el-table-column label="性别" prop="sex" align="center"></el-table-column>
                        <el-table-column label="电话" prop="tel" align="center"></el-table-column>
                        <el-table-column label="健康状况" prop="health" align="center"></el-table-column>
                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button
                                        size="mini"
                                        type="danger"
                                        plain
                                        @click="deleteManagerById(scope.row.mid)">删除
                                </el-button>
                                <!--scope.$index→拿到每一行的index;scope.$row→拿到每一行的数据-->
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="divstyle">
                        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                       :current-page="currentPage"
                                       small
                                       background
                                       :page-sizes="[5,10,20,100]" :page-size="pageSize"
                                       layout="total, sizes, prev, pager, next, jumper" :total="AllManager.length">
                        </el-pagination>
                    </div>
                </el-card>
            </div>
        </div>

        <el-dialog title="填写信息" :visible.sync="dialogFormVisible" center width="30%">
            <el-form :model="managerFormInfo">
                <el-form-item label="名称:">
                    <el-input v-model="managerFormInfo.mname" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码:">
                    <el-input v-model="managerFormInfo.password" type="password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="性别:">
                    <el-select v-model="managerFormInfo.sex" placeholder="请选择">
                        <el-option label="男" value="男"></el-option>
                        <el-option label="女" value="女"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="联系方式:">
                    <el-input v-model="managerFormInfo.tel" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="健康状况:">
                    <el-select v-model="managerFormInfo.health" placeholder="请选择">
                        <el-option label="健康" value="健康"></el-option>
                        <el-option label="疑似" value="疑似"></el-option>
                        <el-option label="确诊" value="确诊"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span style="color: red">默认密码为：123456</span>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addManager">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "newsDelete",
        data() {
            return {
                currentPage: 1, // 当前页码
                pageSize: 5,// 每页的数据条数
                showClose: false,
                AllManager: [],
                dialogFormVisible: false,
                managerFormInfo: {
                    mname: "",
                    password: "123456",
                    sex: "",
                    tel: "",
                    health: "",
                },
            }
        },
        created() {
            this.getAllManager()
        },
        methods: {
            async getAllManager() {
                const {data: res} = await this.$http.get("getAllManager");
                this.AllManager = res
            },

            async deleteManagerById(mid) {
                const {data: res} = await this.$http.get("deleteManagerById?mid=" + mid);
                if (res === "ok") {
                    await this.getAllManager()
                    this.$message.success("成功");
                } else {
                    this.$message.error("失败")
                }
            },

            showAddManagerDialog() {
                this.dialogFormVisible = true;
            },

            async addManager() {
                console.log(this.managerFormInfo)
                if (this.managerFormInfo.mname !== ""&&this.managerFormInfo.health!=="") {
                    const {data: res} = await this.$http.post("addManager", this.managerFormInfo);
                    if (res === "ok") {
                        this.$router.go(0)
                        this.dialogFormVisible = false;
                        this.$message.success("成功");
                    } else {
                        this.$message.error("失败")
                    }
                }else {
                    this.$message.error("请填写完整")
                }
            }
            ,
            /* 分页功能的实现 */
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.currentPage = 1;
                this.pageSize = val;
            }
            ,
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage = val;
            }
            ,
        }
    }
</script>

<style scoped>
    .divstyle {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .box-card {
        width: 90%;
    }

    /*分割线样式*/
    .el-divider--horizontal {
        margin: 10px 0;
        background: 0 0;
        border-top: 3px dashed #1f0149;
    }

    .el-input {
        width: 250px;
    }
</style>